<template>
  <div class="category">
    <el-button @click="show_dialog">新增</el-button>
    <!-- 文章列表 -->
    <el-table :data="category_" style="width: 100%">
      <el-table-column prop="no" label="序号" width="180" align="center">
      </el-table-column>
      <el-table-column prop="name" label="分类名称" width="280" align="center">
      </el-table-column>
      <el-table-column
        prop="description"
        label="分类介绍"
        width="600"
        align="center"
      >
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot="scope">
          <el-button @click="open(scope.row.id)">删除</el-button>
          <el-button @click="edit_category(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 模态框 -->
    <el-dialog :title="title" :visible.sync="dialog_category" width="70%">
      <el-form :model="form_category">
        <el-form-item label="名称" :label-width="formLabelWidth_category">
          <el-input v-model="form_category.name"></el-input>
        </el-form-item>
        <el-form-item label="介绍" :label-width="formLabelWidth_category">
          <Tinymce v-model="form_category.description"></Tinymce>
        </el-form-item>
        <el-form-item label="序号" :label-width="formLabelWidth_category">
          <el-input v-model="form_category.no"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog_category = false">取 消</el-button>
        <el-button type="primary" @click="save_category">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// 导入qs
import qs from "qs";
// 导入moment
import moment from "moment";

import { mapActions, mapState } from "vuex";

// 导入组件
import Tinymce from "../../components/Tinymce";

export default {
  // 注册组件
  components: {
    Tinymce,
  },
  data() {
    return {
      title: "录入分类信息",

      total: 0,
      dialog_category: false,
      form_category: {},
      formLabelWidth_category: "120px",
      // dialogVisible: false
    };
  },
  computed: {
    ...mapState("article", ["category", "category_"]),
  },
  created() {
    this.page_query();
    this.findAll_category();
  },
  // 监听器
  // 当监听的变量发生变化时，执行监听中的代码
  watch: {
    obj: {
      handler: function () {
        this.page_query();
      },
      deep: true,
    },
  },
  methods: {
    ...mapActions("article", [
      "findAllCategory",
      "saveOrUpdateCategory",
      "deleteCategory",
    ]),
    open(id) {
      this.$confirm("您将永久删除该文件, 是否继续?", "提示！！！", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.delete_category(id);
          if (id == 3 || id == 4 || id == 5 || id == 6 || id == 7) {
            this.$message({
              type: "success",
              message: "内置栏目无法删除!",
            });
          } else {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 修改按钮
    edit_category(val) {
      // 0. 修改模态框标题
      this.title = "修改文章";
      // 1. 弹出模态框
      this.dialog_category = true;
      // 2. 将当前行数据放入模态框
      this.form_category = JSON.parse(JSON.stringify(val));
    },
    // 查询所有栏目
    findAll_category() {
      this.findAllCategory();
    },
    // 显示模态框
    show_dialog() {
      // 0. 修改模态框标题
      this.title = "录入分类信息";
      this.dialog_category = true;
      this.form_category = {};
    },
    // 保存文章
    save_category() {
      this.saveOrUpdateCategory(this.form_category).then(() => {
        this.dialog_category = false;
        this.page_query();
        this.form_category = {};
      });
    },
    // 删除
    delete_category(id) {
      var obj = {
        id: id,
      };
      this.deleteCategory(obj);
      this.save_category()
    },
    // 分页查询
    page_query() {
      this.findAllCategory();
    },
  },
};
</script>